<template>
  <div class="container-big dingtalk-ticket-detail-page">
    <div class="dingtalk-ticket-banner">
      <ucan-ticket :key="ticket.ticketId" :id="ticket.ticketId" :name="ticket.uName" :type="ticket.tTypeName" :address="ticket.address" :price="ticket.price" :forwarded="ticket.isActive === 5" :expired="ticket.isActive === 3" :used="ticket.isActive === 4" :activityId="ticket.activityId" :activeTime="{stime: ticket.stime, etime: ticket.etime, activeDate: ticket.activeDate}" />
    </div>
    <div class="dingtalk-ticket-content">
      <router-link :to="`/preserve/${ticket.activityId}`" class="dingtalk-ticket-appointment" v-if="!schedules || schedules.length === 0">
        <div class="appointment-title">预约分会场</div>
        <div class="appointment-desc">
          <img src="https://gw.alicdn.com/tfs/TB1otQQHirpK1RjSZFhXXXSdXXa-32-44.png" class="icon-tip-light" />
          分会场预约截止日期{{formatDeadlineTime(this.deadline)}}, 一旦预约成功不支持修改
        </div>
        <co-icon-arrow-right class="appointment-link" />
      </router-link>
      <my-schedule v-if="schedules && schedules.length > 0" :list="schedules" />
      <div class="dingtalk-use-ticket">
        <div class="use-ticket-title">
          用票人信息
        </div>
        <div class="use-ticket-content">
          <p class="use-ticket-message">
            <span class="msg-label">
              姓名
            </span>
            <span class="msg-content">
              {{ticket.uName}}
            </span>
          </p>
          <p class="use-ticket-message">
            <span class="msg-label">
              手机号
            </span>
            <span class="msg-content">
              {{ticket.uTel}}
            </span>
          </p>
          <p class="use-ticket-message">
            <span class="msg-label">
              邮箱
            </span>
            <span class="msg-content">
              {{ticket.uEmail}}
            </span>
          </p>
          <p class="use-ticket-message">
            <span class="msg-label">
              身份证号
            </span>
            <span class="msg-content">
              {{ticket.uIdCard}}
            </span>
          </p>
          <p class="use-ticket-message">
            <span class="msg-label">
              公司名称
            </span>
            <span class="msg-content">
              {{ticket.company}}
            </span>
          </p>
          <p class="use-ticket-message">
            <span class="msg-label">
              订单编号
            </span>
            <span class="msg-content">
              {{ticket.orderCode}}
            </span>
          </p>
          <!-- <p class="use-ticket-message">
            <span class="msg-label">
              转送票
            </span>
            <span class="msg-content">
              来自 霖铃的馈赠
            </span>
          </p> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UcanTicket from "./ucan-ticket";
import MySchedule from "./schedule";
import services from "../../api/mine";
import { addZero } from "../../utils";

export default {
  data() {
    return {
      ticket: {},
      schedules: [],
      deadline: new Date()
    };
  },
  mounted() {
    const { ticketTypeId, ticketId } = this.$route.query;

    services.getTicket(Number(ticketTypeId), ticketId).then(res => {
      this.ticket = res;
      services.getDeadlineTime(res.activityId).then(({ cutoffTime }) => {
        this.deadline = new Date(Number(cutoffTime));
      });
    });
    services.getBranchMeet().then(res => {
      this.schedules = res;
    });
  },
  methods: {
    formatDeadlineTime(time = new Date()) {
      return `${time.getFullYear()}年${addZero(time.getMonth() + 1)}月${addZero(
        time.getDate()
      )}日`;
    }
  },
  components: {
    UcanTicket,
    MySchedule
  }
};
</script>
<style lang="less">
.dingtalk-ticket-detail-page {
  background-color: #1b1c20;
  text-align: left;

  .dingtalk-ticket-banner {
    padding: 32px 30px;
    background: url(/static/img/ucan-ticket-detail-banner.png) no-repeat;
    background-size: 100%;
  }

  .dingtalk-ticket-content {
    margin-top: 52px;
    padding: 0 30px 30px;
  }

  .dingtalk-ticket-appointment {
    display: block;
    color: #fff;
    text-align: left;
    position: relative;
    .appointment-title {
      font-size: 30px;
    }

    .appointment-desc {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10px;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.7);
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
      letter-spacing: -1px; /*no*/
    }

    .icon-tip-light {
      width: 22px;
      margin-right: 6px;
    }
    .appointment-link {
      font-size: 30px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -15px;
    }
  }

  .dingtalk-use-ticket {
    margin-top: 64px;
    .use-ticket-title {
      font-size: 30px;
      margin-bottom: 24px;
    }
    .use-ticket-content {
      background: rgba(76, 76, 76, 0.2);
      border: 1px solid rgba(93, 93, 93, 0.2);
      padding: 40px;
    }

    .use-ticket-message {
      margin-top: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      &:first-child {
        margin-top: 0;
      }
      .msg-label {
        width: 160px;
        flex-shrink: 0;
        text-align: left;
        margin-right: 24px;
        font-size: 26px;
        color: #fff;
      }
      .msg-content {
        flex: 1;
        font-size: 26px;
        color: #fff;
      }
    }
  }
}
</style>
